<template>
	<div class="crumb">
		<h1>{{title}}</h1>
		<div>
			<router-link :class="['a', v.url?'':'disabled']" :to="v.url||currentUrl" v-for="(v,i) in routes" :key="i">
				{{v.label}}
				<span class="split">/</span>
			</router-link>
			{{title}}
		</div>
	</div>
</template>

<script>
	export default{
		props: ['title', 'routes'],
		data(){
			return{
				currentUrl: this.$router.history.current.fullPath
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../assets/css/base.scss';
	.crumb{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	h1{
		font-size: 16px;
	}
	.a{
		color: $info;
	}
	.disabled{
		color: inherit;
		cursor: default;
	}
	.split{
		margin: 0 5px;
		color: $gray;
	}
</style>
